<template>
  <div class="w-[1150px] relative bg-white print-style p-6 h-full">
    <div class="flex justify-between w-full text-center items-center pl-60">
      <div class="flex-1 text-center text-[32px]">{{ printData?.printData?.mPrintSet?.title }}</div>
      <BaseBarcode :value="tableData[0]?.lsh" class="w-60 text-right" />
    </div>

    <div class="flex justify-between items-center mt-5 mb-3">
      <div class="">仓库：{{ tableData[0]?.ckmc }}</div>
      <div class="">盘点人：{{ tableData[0]?.pdr }}</div>
      <div class="w-[180px]">盘点日期：{{ tableData[0]?.pdrq }}</div>
    </div>
    <div class="flex-1">
      <div class="print-table">
        <div class="flex flex-wrap text-sm">
          <div class="h-[40px] w-[50px] print-table-item flex items-center justify-center">序号</div>
          <div class="h-[40px] w-[150px] print-table-item flex items-center justify-start">药品编号</div>
          <div class="h-[40px] w-[200px] print-table-item flex items-center justify-start">药品名称</div>
          <div class="h-[40px] w-[80px] print-table-item flex items-center justify-end">库存数</div>
          <div class="h-[40px] w-[80px] print-table-item flex items-center justify-end">盘点数</div>
          <div class="h-[40px] w-[80px] print-table-item flex items-center justify-end">差异数</div>
          <div class="h-[40px] w-[80px] print-table-item flex items-center justify-start">盘盈盘亏</div>
          <div class="h-[40px] w-[150px] print-table-item flex items-center justify-center">采购单号/采购价</div>
          <div class="h-[40px] w-[80px] print-table-item flex items-center justify-end">零售价</div>
          <div class="h-[40px] w-[151px] print-table-item flex items-center justify-center">差异原因</div>
        </div>
        <div v-for="(item, index) in tableData" :key="item.ph" class="flex border-b text-sm">
          <div class="h-[40px] w-[50px] print-table-item flex items-center justify-center">{{ index + 1 }}</div>
          <div class="h-[40px] w-[150px] print-table-item flex items-center justify-start">{{ item.ypbh }}</div>
          <div class="h-[40px] w-[200px] print-table-item flex items-center justify-start">{{ item.mc }}</div>
          <div class="h-[40px] w-[80px] print-table-item flex items-center justify-end">{{ item.kcsl }}</div>
          <div class="h-[40px] w-[80px] print-table-item flex items-center justify-end">{{ item.pdsl }}</div>
          <div class="h-[40px] w-[80px] print-table-item flex items-center justify-end">{{ item.cysl }}</div>
          <div class="h-[40px] w-[80px] print-table-item flex items-center justify-start">{{ item.pypk }}</div>
          <div class="h-[40px] w-[150px] print-table-item flex items-center justify-end">{{ item.cgdh }} {{ item.cgdj }}</div>
          <div class="h-[40px] w-[80px] print-table-item flex items-center justify-center">{{ item.lsdj }}</div>
          <div class="h-[40px] w-[151px] print-table-item flex items-center justify-center">{{ item.cyyy }}</div>
        </div>
        <div class="flex flex-wrap text-sm">
          <div class="h-[80px]">
            <div class="h-[40px] w-[200px] print-table-item flex items-center justify-center">销售金额 盘前：</div>
            <div class="h-[40px] w-[200px] print-table-item flex items-center justify-center">进货金额 盘前：</div>
          </div>
          <div class="h-[80px] flex">
            <div class="w-[100px]">
              <div class="h-[40px] w-[100px] print-table-item flex items-center justify-end">{{ tableData[0]?.pqxsje }}</div>
              <div class="h-[40px] w-[100px] print-table-item flex items-center justify-end">{{ tableData[0]?.pqjhje }}</div>
            </div>
            <div class="h-[80px] w-[100px] print-table-item flex items-center justify-center">实盘</div>
            <div class="h-[80px] w-[80px] print-table-item flex items-center justify-center">盘亏金额</div>
          </div>
          <div class="h-[80px] flex">
            <div class="h-[80px]">
              <div class="h-[40px] w-[160px] print-table-item flex items-center justify-end">{{ tableData[0]?.jhpkje }}</div>
              <div class="h-[40px] w-[160px] print-table-item flex items-center justify-end">{{ tableData[0]?.xspkje }}</div>
            </div>
            <div class="h-[80px] w-[80px] print-table-item flex items-center justify-center">盘盈金额</div>
          </div>
          <div class="h-[80px] flex">
            <div class="h-[80px]">
              <div class="h-[40px] w-[80px] print-table-item flex items-center justify-end">{{ tableData[0]?.jhpyje }}</div>
              <div class="h-[40px] w-[80px] print-table-item flex items-center justify-end">{{ tableData[0]?.xspyje }}</div>
            </div>
            <div class="h-[80px] w-[70px] print-table-item flex items-center justify-center">盘亏金额</div>
            <div class="h-[80px]">
              <div class="h-[40px] w-[231px] print-table-item flex items-center justify-end">{{ tableData[0]?.jhykje }}</div>
              <div class="h-[40px] w-[231px] print-table-item flex items-center justify-end">{{ tableData[0]?.xsykje }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="flex justify-between items-center mt-5 mb-3">
      <div class="ml-10">打印人：{{ tableData[0]?.dyr }}</div>
      <div class="">打印日期：{{ dayjs().format('YYYY-MM-DD HH:mm:ss') }}</div>
    </div>
  </div>
</template>

<script setup>
import dayjs from 'dayjs'

const props = defineProps({
  printData: {
    type: Object,
    default: () => ({})
  }
})

const tableData = ref({})

watch(
  () => props.printData,
  () => {
    if (props.printData.printData.detail.length > 0) {
      tableData.value = props.printData.printData.detail
    }
  }
)
</script>
<style lang="less" scoped>
.table-border {
  @apply border border-solid  p-1;
}
</style>
